<template>
  <div class="addConfig">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="25%" center>
      <el-form ref="ruleForm" :model="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="名称" size="mini">
          <el-input v-model="ruleForm.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="变量名(key）" size="mini">
          <el-input v-model="ruleForm.fieldKey" placeholder="请输入变量名" />
        </el-form-item>
        <el-form-item label="说明" size="mini">
          <el-input v-model="ruleForm.description" type="textarea" :rows="2" placeholder="请输入说明" />
        </el-form-item>
        <div class="submitBox">
          <el-button size="mini" style="color:#3345ff;border-color: #3345ff" @click="() => dialogVisible = false">取消</el-button>
          <el-button size="mini" type="primary" class="submit" @click="submitSetAdmin">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!--      // 删除-->
    <el-dialog title="确认删除" :visible.sync="qurenDel" width="20%" center>
      <div style="text-align: center">
        <p><i class="icon" style="color:#f48181;font-size: 40px;margin: 10px;">&#xe685;</i></p>
        <p>确认后该变量将被删除，</p>
        <p>并不可恢复，是否确认删除？</p>
      </div>
      <div class="submitBox">
        <el-button size="mini" style="color:#3345ff;" @click="qurenDel = false">取 消</el-button>
        <el-button size="mini" class="submit" type="primary" @click="confirmDel">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addCusromConfig, editCusromConfig, delCusromConfig } from '@/api/approval'
import { getUsername } from '@/utils/authorized.js'

export default {
  name: 'Customconfig',
  data() {
    return {
      sign: 'add',
      title: '添加自定义配置',
      dialogVisible: false,
      qurenDel: false,
      ruleForm: {
        createdBy: getUsername()
      }
    }
  },
  methods: {
    addHander() {
      this.ruleForm = {
        name: '',
        description: '',
        fieldKey: '',
        createdBy: getUsername()
      }
      this.sign = 'add'
      this.title = '添加自定义配置'
      this.dialogVisible = true
    },
    editerHander(row) {
      this.sign = 'edit'
      this.title = '编辑自定义配置'
      this.ruleForm = { ...row }
      this.dialogVisible = true
    },
    delHander(row) {
      this.delId = row.id
      this.qurenDel = true
    },
    async confirmDel() {
      const res = await delCusromConfig(this.delId)
      if (res) {
        res ? this.$emit('updataList') : null
        this.$message.success('删除成功')
      } else {
        this.$message.error('删除失败')
      }
      this.qurenDel = false
    },
    async submitSetAdmin() {
      const data = this.ruleForm
      let res
      if (data.name === '') {
        this.$message.error('名称不能为空！')
        return false
      }
      if (data.fieldKey === '') {
        this.$message.error('变量名(key)不能为空！')
        return false
      }
      if (this.sign === 'add') {
        res = await addCusromConfig(this.ruleForm)
        res ? this.$emit('updataList') : null
        res ? this.$message.success('添加成功') : this.$message.error('添加失败')
      } else {
        res = await editCusromConfig(this.ruleForm)
        res ? this.$emit('updataList') : null
        res ? this.$message.success('编辑成功') : this.$message.error('编辑失败')
      }
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .submitBox{
    text-align: center;
  }
</style>
